<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        .xhj {
            position: fixed;
            right: 20px;
            bottom: 20px;
            border-radius: 50%;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-xhj v-show="show" class="xhj"><i class="fa fa-star"></i></div>
        <div v-for="item,index in 50" :key="index">{{item}}</div>
    </div>
    <script>
        Vue.directive('xhj', {
            inserted: (el) => {
                el.onclick = () => {
                    console.log("sa")
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                show: false,
            },
            methods: {

            }, mounted() {
                window.onscroll = () => {
                    if (window.scrollY > 100) {
                        this.show = true
                    } else {
                        this.show = false
                    }
                }
            },
        })
    </script>
</body>

</html>